<template>
  <div>
    <hr>
      <div >欢迎光临vue开发的收银系统-水果店</div>
      <hr>
      <span>苹果10￥/斤，折扣《八折》</span>
      <hr>
      <div>请输入要购买的斤数<span><input type="number" v-model="number"></span></div>
      <hr>
      <div><button @click="btFn">结账买单</button></div>
      <hr>
      <div>
        <span>结账单：总价：{{ To }}￥元</span>
        <span>折价后：{{total }}￥元</span>
        <span>省了：{{ saveIt }}￥元</span>
      </div>
      <hr>
  </div>
</template>

<script>
export default {
data(){
  return{
    To:0,
    total:0,
    number:0,
    saveIt:0
  }
},
methods:{
  btFn(){
    this.To = this.number * 10
    this.total = this.number * 10 * 0.8
    // this.saveIt = this.number * 10 *((1 * 100 - 0.8 * 100) / 100)
    this.saveIt = this.To - this.total
  }
}

}
</script>

<style>

</style>